<template>
  <div class="pretty-man-girl pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>优男靓女
      <i class="iconfont icon-gengduo"></i>
    </div>
    <div class="section">
      <div class="head-box">
        <div class="title">{{ info.title }}</div>
        <div class="desc flex-between">
          <div class="left">发布单位：{{ info.brandName }}</div>
          <div class="right">{{ info.createTime }}</div>
        </div>
        <div class="desc flex-between">
          <div class="left">审核单位：{{ info.auditName }}</div>
          <div class="right flex-align">
            <div class="flex-align">
              <i class="iconfont icon-yanjing"></i>
              {{ info.viewNum || 0 }}
            </div>
            <div class="flex-align" @click="dianZan(info)">
              <i class="iconfont icon-dianzan"></i>
              {{ info.praiseNum || 0 }}
            </div>
            <!-- <i class="iconfont icon-edit"></i> -->
          </div>
        </div>
      </div>
      <div class="item-box">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          > -->
        <div v-if="list.length > 0&&type===0">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="photos-box">
              <img class="item-img" v-lazy="ImgDomin(item.lifePhotos)" alt="" />
              <div class="msg-btn flex-center" @click="leaveMsg(item.id)">
                我要留言
              </div>
            </div>
            <div class="con">
              <div class="name-box flex-align">
                <img class="avatar" v-lazy="ImgDomin(item.avatar)" alt="" @click="requirement(item.id)" />
                <div class="name" style="font-size: 15px;">
                  <div>{{ item.userName }}</div>
                  <div style="font-size: 12px;">{{ item.coding }}</div>
                </div>
                <div class="tip" v-if="item.height">{{ item.height | numFilter }}cm</div>
                <div class="tip" v-if="item.birthday">{{ item.birthday | birth }}</div>
                <div class="tip" v-if="item.eduInfo">{{ item.eduInfo }}</div>
<!--                <div class="education" style="margin: 0 5px;">{{ item.educational }}</div>-->
              </div>
              <div class="desc">
                {{ item.introduce }}
              </div>
            </div>
          </div>
        </div>
        <div class="content" v-else-if="type===1" v-html="contentList.context"></div>
        <div class="empty" v-else>
          <img
            style="width: 100%"
            src="../assets/img/common-empty.png"
            alt=""
          />
        </div>
        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
      <!-- 品牌首页的交友品牌 -->
      <div class="aa aa1">
        <div class="bland-box">
          <div class="bland-box-img">
            <img v-lazy="brandDetails.publicity" alt="" />
<!--            <img src="https://jyly-img.hzgsredcross.org.cn/img/yang/temp/%E4%B8%8B%E8%BD%BD_1639903913981.png" alt="">-->
          </div>
          <div class="con">
            <div class="bland-title" style="font-size:18px;font-weight:bold;">{{ brandDetails.brandName }}</div>
            <div class="bland-desc">
              {{ brandDetails.introduce }}
            </div>
            <!--          <div class="join-btn flex-center" @click="join(brandDetails.id)">-->
            <!--            加入会员-->
            <!--          </div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- 留言弹窗 -->
    <van-popup v-model="showMessage" position="center">
      <div class="message-popup">
        <div class="pop-title">我要留言</div>
        <div class="con">
          <van-field
            v-model="message"
            rows="5"
            autosize
            name="message"
            label=""
            type="textarea"
            placeholder="请输入留言内容"
          />
        </div>
        <van-button round block color="#fd7895" @click="submit()"
          >提交</van-button
        >
      </div>
    </van-popup>
    <van-popup v-model="isSelection" position="center" :style="{width:'90% ',height: '50%' }" style="border-radius: 10px;">
      <div class="selection">
        <div>择偶要求</div>
        <div class="selection-title">
          <div class="selection-name">
            <p><span>年份</span>：{{ boyfriend.ageStart || "未填写" }}~{{ boyfriend.ageEnd || "未填写" }}</p>
            <p><span>身高</span>：{{ boyfriend.heightStart || "未填写" }}<i v-if="boyfriend.heightStart">cm</i>~{{ boyfriend.heightEnd || "未填写" }}<i v-if="boyfriend.heightEnd">cm</i></p>
            <p><span>年收入</span>： <i v-if="boyfriend.targetAward !== 0">{{ boyfriend.targetAward }}万</i><i v-if="boyfriend.targetAward === 0">暂无收入</i></p>
          </div>
          <div class="selection-img"><img :src="boyfriend.avatar" alt=""></div>
        </div>
        <div class="selection-company">
          <p><span>婚姻状况</span>：{{ targetIsmarital }}</p>
          <p><span>学历</span>：{{ learning || "未填写" }}</p>
          <div>职业：{{ study || "未填写" }}</div>
        </div>
        <van-button color="linear-gradient(to left, #f95579, #fd7493)" @click="off">关闭</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getfsGroupList, getqueryById } from "@/api/pretty";
import { addfsMessage } from "@/api/activity";
import { getcategory } from "@/api/fellowship";
import {getTargetInfo, spotFabulous} from "../api/activity";
import {getbrandinfo} from "../api/brand";
export default {
  data() {
    return {
      info: {},
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      showMessage: false,
      mId: "",
      message: "",
      educationList: [],
      brandDetails:[],
      type: null,
      contentList:"",
      isSelection: false,
      boyfriend: [],
      targetIsmarital: "",
      educationTitle:{0: "其他",1:"初中及以下",2:"高中",3:"大专",4:"本科",5:"硕士",6:"博士"},
      objectEducationCheck:[],
      targetOccupationCheck:[],
      learning: "",
      study: "",
    };
  },
  async created() {
    this.zhiYe()
    this.getInfo();
    await this.getEducationList();
    this.getList();
    this.getByInfo()
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = Number(value).toFixed(2)
      // num.toFixed(2)获取的是字符串
      return Number(realVal)
    },
    birth(value){
      let day;
      day = value.substring(0, 4);
      return day
    }
  },
  methods: {
    getByInfo(){
      getbrandinfo({id:this.$route.query.brandId}).then(res=>{
        this.brandDetails = res.data
        console.log(this.brandDetails,"1999");
      })
    },
    off(){
      this.isSelection = false
    },
    zhiYe(){
      getcategory("zylb").then((res) => {
        if (res.code === 0) {
          this.targetOccupationList = res.data
          let b = []
          this.targetOccupationList.forEach(item=>{
            b.push(item.title)
          })
          this.occupationTitle = {...b}
        }
      });
    },
    // 择偶要求
    requirement(id){
      this.isSelection = true
      getTargetInfo({userId:id}).then(res=>{
        this.boyfriend = res.data
        if(this.boyfriend.taergetEducational === null || this.boyfriend.taergetEducational === ""){
          this.learning = "未填写"
        }else{
          this.objectEducationCheck = this.boyfriend.taergetEducational.split(",")
          let a = []
          this.objectEducationCheck.forEach(item=>{
            a.push(this.educationTitle[parseInt(item.substr(0))])
          })
          this.learning = a.join()
        }
        if(this.boyfriend.targetQuarters === null || this.boyfriend.targetQuarters === ""){
          this.study = "未填写"
        }else{
          this.targetOccupationCheck = this.boyfriend.targetQuarters.split(",")
          let b = []
          this.targetOccupationCheck.forEach(item=>{
            b.push(this.occupationTitle[parseInt(item.substr(0))])
          })
          this.study = b.join()
        }
        if(res.data.targetIsmarital === "0"){
          this.targetIsmarital = "无婚史"
        } else if(res.data.targetIsmarital === "1"){
          this.targetIsmarital = "离异或丧偶且无孩"
        } else if(res.data.targetIsmarital === "2"){
          this.targetIsmarital = "离异或丧偶且有孩"
        }else{
          this.targetIsmarital = "未填写"
        }
      })
    },
    getInfo() {
      getqueryById({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.code === 0) {
          this.info = res.data;
        }
      });
    },
    // 点赞
    dianZan(info) {
      spotFabulous(info.id).then(res => {
        if(res.code === 0){
          this.getInfo()
        }else{
          this.$toast(res.msg);
        }
      })
    },
    async getEducationList() {
      await getcategory("xlxz")
        .then((res) => {
          if (res.code === 0) {
            this.educationList = res.data;
          }
        })
        .catch((err) => {});
    },
    getList() {
      getfsGroupList({
        id: this.$route.query.id,
      })
        .then((res) => {
          if (res.code === 0) {
            console.log(res,"111");
            this.type = res.data.type
            if(this.type === 0){
              let list = res.data.fsUserVOList
              list.map((item) => {
                let eduInfo = this.educationList.find(
                    (c) => c.value === item.educational
                );
                item.eduInfo = eduInfo ? eduInfo.title : "";
              });
              this.list = list;
            } else if(this.type === 1){
              this.contentList = res.data
              console.log(this.contentList,"444");
            }
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    leaveMsg(id) {
      if (!localStorage.getItem("jyToken")) {
        return this.$router.push({
          name: "Login",
          query: { dirUrlName: "PrettyManGirl", id: this.$route.query.id },
        });
      }
      this.mId = id;
      this.showMessage = true;
    },
    // 提交留言
    submit() {
      addfsMessage({
        id: this.mId,
        message: this.message,
      })
        .then((res) => {
          if (res.code == 0) {
            this.$toast("提交成功");
            this.showMessage = false;
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("留言失败，请稍后重试！");
        });
    },
    // 现无分页 以下功能暂不使用
    onLoad() {
      getfsGroupList(this.params).then((res) => {
        if (res.code == 0) {
          let data = res.data;
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }

          if (this.params.pageNo == 1) {
            this.list = data.records;
          } else {
            this.list = this.list.concat(data.records);
          }
          this.loading = false;

          if (this.list.length >= data.total) {
            this.finished = true;
          } else {
            this.params.pageNo++;
          }
        }
      });
    },
    onRefresh() {
      this.params.pageNo = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/pretty-man-girl.less");
.selection{
  padding: 20px;
  .selection-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    .selection-name{
      display:flex;
      flex-direction: column;
      span{
        display:inline-block;
        width: 65px;
        text-align: left;
      }
    }
    .selection-img{
      width: 100px;
      height: 100px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .selection-company{
    p{
      span{
        display:inline-block;
        width: 65px;
        text-align: left;
      }
    }
  }
  .van-button{
    margin: 10px 0;
    width: 100%;
    border-radius: 22px;
  }
}
</style>
